<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				/*指定从右侧开始*/
				direction: ltr;
			}
			.p2{
				width: 100px;
				height: 100px;
				background-color: beige;
				margin-right: 10px;
				
			}
			.p1{
				width: 400px;
				padding: 20px;
				background-color: #ccc;
				display: flex;
				/*指定弹性布局中子组件的位置*/
				flex-direction: row-reverse;
				margin-bottom: 50px;
			}
			.p3{
				width: 400px;
				padding: 20px;
				height: 300px;
				background-color: #ccc;
				display: flex;
				/*使用justify-content居中*/
				justify-content: center;
				/*使用align-items垂直居中*/
				align-items: center;
				/*溢出换行*/
				flex-wrap: wrap;
			}
		</style>
	</head>
	<body>
		<div class="p1">
			<div class="p2"></div>
			<div class="p2"></div>
			<div class="p2"></div>
		</div>
		<!--
		justify-content 属性
		align-items 属性
		flex-wrap 属性
		-->
		<div class="p3">
			<div class="p2"></div>
			<div class="p2"></div>
			<div class="p2"></div>
			<div class="p2"></div>
			<div class="p2"></div>
		</div>
	</body>
</html>